<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3实现烟花特效</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html{
            width: 100%;
            height: 100%;
        }
        body{
            width: 100%;
            height: 100%;
        }
        #container{
            width: 100%;
            height: 100%;
            background-color: black;
            position: relative;
        }
        .fireworks{
            position: absolute;
            left: 50%;
            margin-left: -250px;
            bottom: 60%;
            margin-bottom: -180px;
            transform: scale(0);
            animation: fireworks 2s 3s ease-in infinite;
        }
        #fireworks{
            left: 50%;
            margin-left: -250px;
            bottom: 60%;
            margin-bottom: -180px;
        }
        #fireworks1{
            left:30%;
            bottom: 50%;
            animation: fireworks 4s 3s ease-in infinite;
        }
        #fireworks2{
            left:60%;
            bottom: 80%;
            animation: fireworks 5s 3s ease-in infinite;
        }
        #fireworks3{
            left:70%;
            bottom: 60%;
            animation: fireworks 6s  3s ease-in infinite;
        }

        @keyframes fireworks {
            0%{
                transform: scale(0);
            }
            80%{
                transform: scale(1);
            }
            100%{
                 transform: scale(1);
                opacity: 0;
            }
        }
        #firecracker img{
             width:8px;
            position: absolute;
            left: 50%;
            bottom: 0;
            margin-left: -4px;
            animation: firecracker 2s ease-in infinite;
        }
/*         #firecracker img{
            width:8px;
        } */
        @keyframes firecracker {
            0%{
                transform: scale(1);
                bottom: 0%;
            }
            100%{
                bottom: 60%;
                transform: scale(0);
            }
        }
    </style>
</head>
<body>
<div id="container">
    <div class='fireworks' id="fireworks"><img src="imgs/fireworks.png" alt=""></div>
    <div class='fireworks' id="fireworks1"><img src="imgs/fireworks.png" alt=""></div>
    <div class='fireworks' id="fireworks2"><img src="imgs/fireworks.png" alt=""></div>
    <div class='fireworks' id="fireworks3"><img src="imgs/fireworks.png" alt=""></div>
    <div id="firecracker"><img src="imgs/firecracker.png" alt=""></div>
</div>
</body>
</html>